<template>
	<div class="sales-table">
    <ul class="nav">
      <li class="active" v-on:click="initDateIndex(1)" id="nav_1">
        <div class="nav-title font-lg">今日</div>
        <div class="nav-date color-primary">
          <p class="date-today">{{endDate}}</p>
        </div>
        <div class="nav-border"></div>
      </li>
      <li v-on:click="initDateIndex(2)" id="nav_2">
        <div class="nav-title font-lg">本周</div>
        <div class="nav-date color-primary">
          <p><span class="date-from">{{weekDate}}</span><i>&nbsp;-</i></p>
          <p class="date-today">{{endDate}}</p>
        </div>
        <div class="nav-border"></div>
      </li>
      <li v-on:click="initDateIndex(3)" id="nav_3">
        <div class="nav-title font-lg">本月</div>
        <div class="nav-date color-primary">
          <p><span class="date-from">{{monthDate}}</span><i>&nbsp;-</i></p>
          <p class="date-today">{{endDate}}</p>
        </div>
        <div class="nav-border"></div>
      </li>
      <li v-on:click="initDateIndex(4)" id="nav_4">
        <div class="nav-title font-lg">本年</div>
        <div class="nav-date color-primary">
          <p><span class="date-from">{{yearDate}}</span><i>&nbsp;-</i></p>
          <p class="date-today">{{endDate}}</p>
        </div>
        <div class="nav-border"></div>
      </li>
    </ul>
    <div class="switch-box">
      <div class="switch-txt">查看各项目用户意向等级分布情况</div>
      <label class="switch">
        <input type="checkbox"  class="switch-input" v-on:change="reportChange()">
        <span class="switch-core"></span>
      </label>
    </div>
    <div class="tab-box tab-detail" >
      <table border="1" class="tab-date">
     
       <tr class="table-bg-ebebeb">
            <th class="item-name">项目名称</th>
            <th>来电</th>
            <th>来访 </th>
            <th>来电/来访小计</th>
          </tr>	
          
          <tbody v-for="(row,index) in contactWaryList" v-if="row.all">
          <tr>
            <td class="item-name">汇总</td>
            <td>{{row.callFrequency}}</td>
            <td>{{row.visitFrequency}}</td>
            <td>{{row.total}}</td>
          </tr>
          
        </tbody> 
        <tbody v-for="(row,index) in contactWaryList" v-if="row.all==false">
        
        	
          <tr>
            <td class="item-name">{{row.projectName}}</td>
            <td>{{row.callFrequency}}</td>
            <td>{{row.visitFrequency}}</td>
            <td>{{row.total}}</td>
          </tr>
         
          <tr class="diagram-on"  style="display: none;" >
            <td colspan="4" class="bar-diagram">
              <div   v-bind:id="['div_'+row.projectId]"  dir="div_report"></div>
              <p class="color-primary">数据截止到{{reportDate}}</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
	
</template>

<script>
	
			
	
	export default{
		data(){
			return{
				contactWaryList:[],
				highchartsList:[],
				endDate:"",
				weekDate:"",
				monthDate:"",
				yearDate:"",
				reportDate:""
			}
		},mounted:function(){
			this.initDateIndex(1);
			
		},methods:{
			initDateIndex:function(index){
				document.setTitle("客户报表");
				var loadIndex = layer.load(1, {shade: false});
				var navList = $(".nav li");
				for(var i=0;i<navList.length;i++){
					navList.eq(i).removeClass("active");
				}
				$("#nav_"+index).addClass("active");
				var _self = this;
				var url=_self.utilHelper.apiUrl+"/wordFlowData/queryContactWary";
				var params = {
					index:index,
					userticket:_self.$route.params.userticket,
					userId:_self.$route.params.userid
				};
				_self.$http.post(url,params).then((response)=>{
					var body = response.body;
					if(body.error!=null&&body.error!=""){
						layer.alert(body.error);
					}else{
						_self.contactWaryList = body.contactWay;
						_self.highchartsList = body.highcharts;
						_self.endDate = _self.$moment().format('YYYY-MM-DD');
						_self.reportDate = _self.$moment().format('YYYY-MM-DD HH:mm:ss');
						_self.monthDate = _self.$moment().startOf('month').format("YYYY-MM-DD");
						_self.yearDate = _self.$moment().startOf('year').format("YYYY-MM-DD");
						_self.weekDate = _self.$moment().startOf('isoWeek').format("YYYY-MM-DD");
						_self.reportChange();
					}
					
					layer.close(loadIndex);
				});
			},reportChange:function(){
				var _self =this;
				var reportTr = $(".diagram-on");
				for(var i=0;i<reportTr.length;i++){
						reportTr.eq(i).show();
				}
				var flag = $(".switch-input").prop("checked");
				if(flag){
					var obj = $("div [dir=div_report]");
					for(var i=0;i<obj.length;i++){
						var projectId = obj.eq(i).attr("id");
						_self.$highcharts.chart({ 
							chart: {
					            type: 'column',
					            renderTo:projectId
					           
					        },
					         yAxis: {
					            min: 0,
					            title: {
					                text: '客户等级'
					            }
					        },
					        tooltip: {
					            pointFormat: '<span >{series.name}</span>: <b>{point.y}</b> ({point.percentage:.1f}%)<br/>',
					            shared: true,
					            formatter:function(){
					            	var listY = this.points[0].series.processedYData;
					            	var total = 0;
					            	if(listY!=null&&listY!=undefined){
					            		for(var i=0;i<listY.length;i++){
					            			total+=listY[i];
					            		}
					            	}
					            	var ce = new CalcEval();
					            	var val = ce.eval("'"+(this.y)/(total)+"'");
					            	var value = (val*100).toFixed(2);
					            	var html = "<span>等级:"+this.x+"</span><br><span>人数:"+this.y+"</span><br>占比:<span>"+value+"%</span>";
					            	return html;
					            }
					        },
					        title: {
					        text: _self.highchartsList[i].name
					        },
					        xAxis: {
					            categories: ['A', 'B', 'C', 'D']
					        },
					        credits: {
					            enabled: false
					        },
					        series: [_self.highchartsList[i]]
						});
					}
				}else{
					for(var i=0;i<reportTr.length;i++){
						reportTr.eq(i).hide();
					}
				}
			}
		
		}
	}
</script>


